<%= content_for(:title) do %>
  <%= @user.display_name %> Profile
<% end %>

<%= content_for(:social_image) do %>
  <%= @user.favorite_crop_image_from_user_setting && image_url(@user.favorite_crop_image_from_user_setting) %>
<% end %>

<div loader
  ng-show="ofPageLoading">
  <i class="fa fa-spinner fa-spin"></i>
</div>

<div class="member-profile"
  ng-controller="profileCtrl"
  ng-show="profileUser.user_setting !== undefined"
  ng-cloak>
  <!-- Pull cover image from member's favorite_crop -->

  <div class="row wide-row canopy-wrapper"
       style="background-image: url({{ profileUser.user_setting.favorite_crop.image_url || '/assets/baren_field.jpg' }}) ">
    <div class="canopy" ng-class="{ editing : editing }" style="">
      <div class="small-12 medium-10 large-6 small-centered columns member-info-wrapper" ng-cloak ng-show="profileUser">
        <div class="row">
          <div ng-if="cropNotSet && profileId === userId" class="small-12 columns set-crop">
            <h2>Success!</h2>
            <p><%= t('.show_you_around') %>
            </p>
            <p>
            <%= t('.this_is_your_member_profile_page') %>
            </p>
          </div>
          <form class="set-crop" ng-show="editing">
            <div class="row collapse">
              <div class="columns small-4">
                <label class="right inline">
                <%= t('.what_is_your_favorite_crop') %>
                </label>
              </div>
              <div class="columns small-6">
                <div crop-search
                  loading-crops-text="'<%= t('crop_searches.show.loading_crops') %>'"
                  crop-on-select="setFavoriteCrop"
                  clear-crop-selection="clearCropSelection">
                  </div>
              </div>


            </div>
          </form>
          <div ng-if="!editing" class="small-12 medium-4 columns">
            <!-- Make this a thing -->
            <div class="member-picture"
              style="background-image: url({{ profileUser.user_setting.pictures[0].medium_url || '/assets/baren_field.jpg' }})">
            </div>
          </div>
          <div ng-if="!editing" class="small-12 medium-8 columns member-infos">
            <h2><%= @user.display_name %></h2>
            <h5><%= @user.user_setting.location %></h5>

            <!-- Make this a user_setting and link_to crop page
            <h5>Favorite Crop: Blueberries</h5> -->

            <!-- Make this real
            <h5>Growing Practices: Organic</h5> -->
          </div>
        </div>
      </div>
      <!-- <%= link_to t('.application.edit_profile'), users_edit_path, class: 'tiny button secondary' %>
      <button class="button tiny secondary" ng-click="editing = !editing"><%= t('.edit_favorite_crop') %></button> -->
    </div>
  </div>

  <div class="row wide-row member-content">
    <!-- Sub header for mobile (replaces sidebar) TODO: Make it real
    <div class="small-12 show-for-small-only columns profile-sub-header">
      <ul>
        <li>
          <h4 class="number">4</h4>
          <p class="attribute">badges</p>
        </li>
        <li>
          <h4 class="number">22</h4>
          <p class="attribute">followers</p>
        </li>
        <li>
          <h4 class="number">68</h4>
          <p class="attribute">following</p>
        </li>
      </ul>
    </div> -->

    <!-- Sidebar for medium and up screens -->
    <div class="medium-4 large-3 show-for-medium-up columns profile-sidebar">
      <% if current_user == @user %>
        <%= link_to t('.application.edit_profile'), users_edit_path, class: 'tiny button secondary' %>
        <button class="button tiny secondary" ng-click="editing = !editing"><%= t('.edit_favorite_crop') %></button>

        <p class="member ">
          <%= t('.member_profile_intro') %>
        </p>

        <ul>
          <li>
            Units: {{ profileUser.user_setting.units }}
          </li>
          <!-- <li>
            Mailing List: {{ profileUser.mailing_list }}
          </li>
          <li>
            Help List: {{ profileUser.help_list }}
          </li> -->
          <!-- <li>
            Years Experience: {{ profileUser.user_setting.years_experience }}
          </li> -->
        </ul>
      <% end %>
      <%= render 'users/show/badges' %>
      <%#= render 'users/followers' %>
      <%#= render 'users/following' %>

    </div>

    <div class="small-12 medium-8 large-9 columns" ng-cloak>

      <!-- Member's Guides -->
      <div class="small-12 columns section">
        <%= render 'users/show/guides' %>
      </div>

      <!-- Member's Gardens -->
      <div class="small-12 columns section">
        <%= render 'users/show/gardens' %>
      </div>

      <!-- Member's Organizations TODO: everything
      <div class="small-12 columns section">
        <%= render 'users/show/organizations' %>
      </div> -->

      <div class="small-12 columns section">
        <% if @user == current_user %>
        Manage <%= link_to t('application.user_settings'), edit_user_registration_path %>
        <% end %>
      </div>

    </div>
  </div>
</div>

<% content_for(:end_js) do %>
  <%= javascript_tag "var USER_ID = '#{current_user ? current_user.id : nil}';" %>
  <%= javascript_tag "var PROFILE_ID = '#{@user ? @user.id : nil}';" %>
  <%= javascript_include_tag 'users/gardens' %>
  <%= javascript_include_tag 'users/show' %>
  <%= javascript_include_tag "search" %>
<% end %>
